<template>
  <div class="page scroll-wrap">
    <back-btn></back-btn>
    <div class="tab item">
      <div class="tab_bubble">
        <span class="bubble"></span>
        <span class="title">{{data.name}}</span>
      </div>
      <button :class="isPraise?'button button-positive':'button positive border-positive button-clear'" @click="follow">{{isPraise?'已关注':'关注'}}</button>
    </div>
    <div class="list description" v-if="data.careerDetail">
      <div class="list list-wrap" v-if="data.careerDetail.descriptionImage||data.careerDetail.description||data.careerDetail.jobContent">
        <div class="item p-0">
          <div class="vertical-bar"></div>
          <h3>简介</h3>
        </div>
        <div class="item item-text-wrap">
          <div style="text-align:center;margin-bottom:10px">
            <img :src="data.careerDetail.descriptionImage + '?x-oss-process=image/resize,w_600'" v-if="data.careerDetail.descriptionImage" />
          </div>
          <p>{{data.careerDetail.description}}</p>
          <div class="word" v-if="data.careerDetail.jobContent">
            <span class="bold mb-10">工作内容：</span>
            <p class="text">{{data.careerDetail.jobContent}}</p>
          </div>
        </div>
      </div>
      <div class="list list-wrap" v-if="data.careerDetail.workEnv">
        <div class="item p-0">
          <div class="vertical-bar"></div>
          <h3>工作环境</h3>
        </div>
        <div class="item item-text-wrap">
          <p class="text" v-if="data.careerDetail.workEnv">{{data.careerDetail.workEnv}}</p>
        </div>
      </div>
      <div class="list list-wrap" v-if="data.careerDetail.knowledgeBackground||data.careerDetail.basicSkill||data.careerDetail.vocationalSkills||data.careerDetail.workExperience||data.careerDetail.occupationalRequirements">
        <div class="item p-0">
          <div class="vertical-bar"></div>
          <h3>工作要求</h3>
        </div>
        <div class="item item-text-wrap">
          <div class="word" v-if="data.careerDetail.educationalRequirements">
            <span class="bold mb-10">学历要求：</span>
            <p>{{data.careerDetail.educationalRequirements}}</p>
          </div>
          <div class="word" v-if="data.careerDetail.knowledgeBackground">
            <span class="bold mb-10">知识背景：</span>
            <p class="text">{{data.careerDetail.knowledgeBackground}}</p>
          </div>
          <div class="word" v-if="data.careerDetail.basicSkill">
            <span class="bold mb-10">基本技能：</span>
            <p class="text">{{data.careerDetail.basicSkill}}</p>
          </div>
          <div class="word" v-if="data.careerDetail.vocationalSkills">
            <span class="bold mb-10">职业技能：</span>
            <p class="text">{{data.careerDetail.vocationalSkills}}</p>
          </div>
          <div class="word" v-if="data.careerDetail.workExperience">
            <span class="bold mb-10">工作经验：</span>
            <p class="text">{{data.careerDetail.workExperience}}</p>
          </div>
          <div class="word" v-if="data.careerDetail.occupationalRequirements">
            <span class="bold mb-10">从业资格：</span>
            <p class="text">{{data.careerDetail.occupationalRequirements}}</p>
          </div>
        </div>
      </div>
      <div class="list list-wrap" v-if="data.careerDetail.developmentPath||data.careerDetail.prospects">
        <div class="item p-0">
          <div class="vertical-bar"></div>
          <h3>未来展望</h3>
        </div>
        <div class="item item-text-wrap">
          <div class="word" v-if="data.careerDetail.developmentPath">
            <span class="bold mb-10">发展路径：</span>
            <p>{{data.careerDetail.developmentPath}}</p>
          </div>
          <div class="word" v-if="data.careerDetail.prospects">
            <span class="bold mb-10">发展前景：</span>
            <p>{{data.careerDetail.prospects}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from '@/utils'
export default {
  layout: 'zhiyuan',
  data () {
    return {
      data: {},
      isPraise: false,
      id: ''
    }
  },
  beforeMount () {
    this.id = this.$route.query.id
    this.$axios.get(api.zhiyuanGetCareersDetails + '/' + this.id).then(data => {
      this.data = data
      this.isPraise = data.praise
    })
  },
  methods: {
    follow () {
      this.$axios.get(api.zhiyuanSetFavorite, { params: { type: 3, id: this.id } }).then(data => {
        this.isPraise = !this.isPraise
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  height: 100%;
  overflow-y: auto;
  padding: 0 15px;
}
.tab {
  display: flex;
  justify-content: space-between;
}
.list > .item {
  padding: 12px 12px 0 0;
  text-align: justify;
}
.mb-10 {
  display: inline-block !important;
  margin-bottom: 10px !important;
}
</style>
